//创建一个路由器,并暴露出去

//第一步:引入createRouter
import {
  createRouter,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";
//引入一个一个可能要呈现的组件
import Home from "@/pages/Home.vue";
import News from "@/pages/News.vue";
import About from "@/pages/About.vue";
import Detail from "@/pages/Detail.vue";

//第二步:创建路由器
const router = createRouter({
  history: createWebHistory(), //路由器的工作模式   url不带#号,缺点:需要服务端配合处理路径问题,否则刷新会有404错误
  // history: createWebHashHistory(), //路由器的工作模式  url带#号,不需要服务端配合处理路径问题，缺点:在SEO优化方面相对较差
  routes: [
    //一个一个的路由规则
    {
      name: "zhuye",
      path: "/home",
      component: Home,
    },
    {
      name: "xinwen",
      path: "/news",
      component: News,
      children: [
        {
          name: "xiang",
          path: "detail", //子级不用加斜杠/  也就是不用写成这样 path:'/detail'
          component: Detail,
        },
      ],
    },
    {
      name: "guanyu",
      path: "/about",
      component: About,
    },
  ],
});

export default router;
